<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link th:href="@{../../back/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{../../back/css/font-awesome.css?v=4.4.0}" rel="stylesheet">

    <!-- jqgrid-->
    <link th:href="@{../../back/css/plugins/jqgrid/ui.jqgrid.css?0820}" rel="stylesheet">

    <link th:href="@{../../back/css/animate.css}" rel="stylesheet">
    <link th:href="@{../../back/css/style.css?v=4.1.0}" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .ui-jqgrid .ui-jqgrid-hbox{
            padding-right:0;
        }
        .table.table-bordered{
            width: 100% !important;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">

                <div class="ibox-content">

                    <div class="ibox-content">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                会议室状态：
                                <select id="queryStatus"  class="form-control">
                                    <option value="" selected="selected">请选择</option>
                                    <option value="NORMAL">正常</option>
                                    <option value="FORBIDDEN">禁止</option>
                                </select>
                            </div>
                            &nbsp;&nbsp;
                            &nbsp;&nbsp;
                            <button class="btn btn-white" type="button" id="queryButton">查询</button>
                        </form>
                    </div>


                    <div class="jqGrid_wrapper">
                        <table id="table_list_1"></table>
                        <div id="pager_list_1"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<input type="hidden" id="taskId" />


<div id="cancelModel" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                    取消任务
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <form  id="cancelForm" role="form">
                            <div class="form-group">
                                <label>备注：</label>
                                <textarea id="cancelRemark" placeholder="请输入" class="form-control" ></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"   onclick="cancelTask()" class="btn btn-primary">
                        取消任务
                    </button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="finishModel" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                    结束任务
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <form  id="finishForm" role="form">
                            <div class="form-group">
                                <label>备注：</label>
                                <textarea id="finishRemark" placeholder="请输入" class="form-control" ></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"   onclick="finishTask()" class="btn btn-primary">
                        结束任务
                    </button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>



<script th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/

    function cancelTask() {
        var remark = escape($("#cancelRemark").val());
        var taskId = escape($("#taskId").val());

        $.ajax({
            type: "post",
            url: "cancelTask.action",
            data: {'id':taskId,'remark':remark}, //发送数据,
            dataType: "json",
            async: false,
            success: function (data) {
                if(data!=null && data.success){
                    alert("取消成功!");
                    $("#table_list_1").trigger("reloadGrid");
                }else {
                    alert(data.message);
                }

            }
        });
        // });
    }

    function finishTask() {
        var remark = escape($("#finishRemark").val());
        var taskId = escape($("#taskId").val());

        $.ajax({
            type: "post",
            url: "finishTask.action",
            data: {'id':taskId,'remark':remark}, //发送数据,
            dataType: "json",
            async: false,
            success: function (data) {
                if(data!=null && data.success){
                    alert("结束成功!");
                    jqmShow();
                    $("#table_list_1").trigger("reloadGrid");
                }else {
                    alert(data.message);
                }

            }
        });
        // });
    }

</script>


<!-- 全局js -->
<script th:src="@{../../back/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{../../back/js/bootstrap.min.js?v=3.3.6}"></script>



<!-- Peity -->
<script th:src="@{../../back/js/plugins/peity/jquery.peity.min.js}"></script>
<!-- jqGrid -->
<script th:src="@{../../back/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820}"></script>
<script th:src="@{../../back/js/plugins/jqgrid/jquery.jqGrid.min.js?0820}"></script>

<!-- 自定义js -->
<script  th:src="@{../../back/js/content.js?v=1.0.0}"></script>

<!-- layerDate plugin javascript -->
<script th:src="@{../../back/js/plugins/layer/laydate/laydate.js}"></script>


<script th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>
<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        // Configuration for jqGrid Example 1
        $("#table_list_1").jqGrid({
            url:ctxPath+'back/meetingRoom/queryMeetingRoomList.action',
            mtype:"POST",
            datatype: "json",
            sortname : 'startTime',
            sortorder : "desc",
            height: 550,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            colNames: [ '会议中心名称','会议室', '状态','操作'],
            colModel: [
                {
                    name: 'conventionCenterName',
                    index: 'conventionCenterName',
                },
                {
                    name: 'name',
                    index: 'name',
                },
                {
                    name: 'status',
                    index: 'status',
                    formatter:statusFormatter
                },
                {
                    name: 'note',
                    index: 'note',
                    sortable: false,
                    sortable: false,
                    editable: false,
                    formatter: alarmFormatter
                }
            ],
            pager: "#pager_list_1",
            viewrecords: true,
            jsonReader: {
                root : "resultList", // 服务端保存数据的集合
                id: "id", //相当于设置主键
                total: "pageSize",　　 //总页数
                page: "currentPage",　　//当前页
                records: "totalRecord",//总记录数
                repeatitems: false,
                cell: "resultList"

            },
            caption: "会议室管理",
            hidegrid: false
        });


        $(function(){



            $("#queryButton").click(function(){
                var status = escape($("#queryStatus").val());

                $("#table_list_1").jqGrid('setGridParam', {
                    url: ctxPath+'back/meetingRoom/queryMeetingRoomList.action',
                    postData:{'status':status}, //发送数据
                    page: 1
                }).trigger("reloadGrid");

            });
        });

        //自定义格式列格式
        function statusFormatter(cellvalue, options, rowObject){
            if(cellvalue=="NORMAL"){
                return "正常";
            }else if(cellvalue=="FORBIDDEN"){
                return "禁用";
            }else{
                return cellvalue;
            }
        }
        //自定义格式列格式
        function alarmFormatter(cellvalue, options, rowObject){
            $('#taskId').val(rowObject.id);

            var imageHtml =" <input data-toggle='modal' data-target='#cancelModel' type='button' value='修改'  />&nbsp;&nbsp;" +
                "<input data-toggle='modal' data-target='#authConfirm' type='button' value='详情'  />&nbsp;&nbsp;";
            // "<input data-toggle='modal' data-target='#authConfirm' type='button' value='开放时间'  />";
            return imageHtml;
        }



        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width()+18;
            $('#table_list_1').setGridWidth(width);
            $('#table_list_2').setGridWidth(width);
        });
    });




</script>


</body>

</html>
